<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>文化旅游</title>
    <link rel="stylesheet" href="../../icon/iconfont.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/imgview.css">
    <link rel="stylesheet" href="../../css/frame0/cate.css">
    <style>
      .video{
        width: 100%;
        height: 10rem;
        background-color: #000
      }
      .zan .zan_icon.active{
        color: rgb(201, 22, 26);
      }
    </style>
</head>

<body style="-webkit-user-select:all">
  <!-- 头部 -->
  <header style="z-index:9999;">
    <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
    <span>美食特产</span>
  </header>
  <div class="travel" id="travel" style="padding-bottom:1rem">

  </div>
</body>
<script type="text/javascript" src="../../lib/zepto.js"></script>
<script type="text/javascript" src="../../lib/artTemplate/template.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/dns.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/html" id="gettravelList">
  {{each items as value index}}
  <!-- 电话咨询悬浮 -->
  <!-- <div class="callBox">
    <span class="iconfont icon-zixun2"></span>
  </div> -->
  <!-- 置顶专区 -->
  {{if value.top == 2}}
  <div class="stick" articleID="{{value.id}}" onclick="opendetail(this)">
    <div>
      <p class="title">{{value.title}}</p>
      <div class="label">
          <button>置顶</button>
          <!-- 点赞 -->
        <div class="label_right" articleID="{{value.id}}">
          <span class="iconfont icon-pinglunzhuanhuan"></span>&nbsp;<span class="comment comment{{value.id}}">{{value.comment_num}}</span>
          {{if value.tid.is_awesome=="yes"}}
          <span class="zan" onclick="getdianzan(this)">
            <span class="iconfont icon-dianzan zan_icon active"></span>&nbsp;<span class="like">{{value.awesome_num+value.virtual_awesome_num}}</span>
          </span>
          {{/if}}
          {{if value.tid.is_awesome=="no"}}
          <span class="zan" onclick="getdianzan(this)">
            <span class="iconfont icon-dianzan zan_icon"></span>&nbsp;<span class="like">{{value.awesome_num+value.virtual_awesome_num}}</span>
          </span>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
  {{/if}}
  <!-- 图文区域 -->
  {{if value.top == 1}}
  <div class="image_text" style="border-bottom:1px solid #eee;padding-bottom:0.3rem" articleID="{{value.id}}" onclick="opendetail(this)">
    <div>
      <p class="title">{{value.title}}</p>
      <div class="imgList">
            <!-- 图文 -->
            {{if value.news_type == 0}}
              <div class="aui-row aui-row-padded photoList" style="padding-top:0.3rem">
              {{each value.head_img.data as val ind}}
                <div class="aui-col-xs-4" imgattr="{{val.filepath}}" onclick="bigPhoto(this)">
                    <!-- <img data-original="{{val.filepath}}" src="{{val.filepath}}" /> -->
                    <img class="imgList" style="width:100%;height:100%;background-image:url('{{val.original_image}}');background-size:cover"/>
                </div>
              {{/each}}
              </div>
            {{/if}}
            <!-- 视频 -->
            {{if value.news_type == 1}}
              <div class="aui-row aui-row-padded" style="padding-top:0.3rem">
                  <video src="{{value.video_id.url}}" style='background-image:url("{{value.head_img[0].filepath}}");background-size:100%' class="video"  poster="9999.jpg" controls x5-playsinline="" playsinline="" webkit-playsinline=""></video>
              </div>
            {{/if}}

      </div>
      <div class="label">
          <span>{{value.read_num+value.virtual_read_num}}阅读</span>&nbsp;&nbsp;
          <span>{{value.create_time}}</span>
          <!-- 点赞 -->
        <div class="label_right" articleID="{{value.id}}">
          <span class="iconfont icon-pinglunzhuanhuan"></span>&nbsp;<span class="comment comment{{value.id}}">{{value.comment_num}}</span>
          {{if value.tid.is_awesome=="yes"}}
          <span class="zan" onclick="getdianzan(this)">
            <span class="iconfont icon-dianzan zan_icon active"></span>&nbsp;<span class="like">{{value.awesome_num+value.virtual_awesome_num}}</span>
          </span>
          {{/if}}
          {{if value.tid.is_awesome=="no"}}
          <span class="zan" onclick="getdianzan(this)">
            <span class="iconfont icon-dianzan zan_icon"></span>&nbsp;<span class="like">{{value.awesome_num+value.virtual_awesome_num}}</span>
          </span>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
  {{/if}}

  {{/each}}
</script>
<script>
    apiready = function() {
      // 监听评论
      api.addEventListener({
          name: "comment2_reload"
      }, function(ret, err) {
          var articleID = localStorage.getItem("articleID");
          var val_comment = $(".comment"+articleID).html();
          val_comment++
          $(".comment"+articleID).html(val_comment)
      })
      gettravel();
    }
    var toast = new auiToast({
        })
    function gettravel() {
      var token = localStorage.getItem("token")
      $.ajax({
        type:"get",
        data:{
          page:1,
          limit:500,
          type:1
        },
        beforeSend:function (request) {
          request.setRequestHeader("token",token)
        },
        url:dns+"action/read",
        success:function(res){
          // console.log(JSON.stringify(res));
          var html = template("gettravelList",{"items":res.data});
          document.getElementById("travel").innerHTML = html;
          // 适配video宽高
          var width = $("video").width();
          var height = width/16*9;
          $("video").height(height)

        }
      })
    }
    //进入详情
    function opendetail(e) {
      var articleID = $(e).attr("articleID");
      localStorage.setItem("articleID",articleID);
      // 跳转到其它页面暂停当前页面的视频
      getvideo()
      api.openWin({
          name: 'frame1_details',
          url: '../frame1/frame1_details.html',
          allowEdit:true,
          pageParam: {
          }
      });
    }
    // 点赞，取消点赞
    function getdianzan(e) {
      //如果提供了事件对象，则这是一个非IE浏览器
      if (e && e.stopPropagation) {
          //因此它支持W3C的stopPropagation()方法
          e.stopPropagation();
      } else {
          //否则，我们需要使用IE的方式来取消事件冒泡
          window.event.cancelBubble = true;
      }
          // 获取此时的毫秒数
          var newTime = new Date();
          var getnewTime = newTime.getTime();
          // 获取登陆时的毫秒数
          var getloginTime = localStorage.getItem("getloginTime");
          var Time = getnewTime-getloginTime;
          var token = localStorage.getItem("token");
          var cacheTime = localStorage.getItem("cacheTime");
          if(Time>cacheTime||!token){
            api.confirm({
                title: "当前游客状态",
                msg: "需要前往登录页面,是否继续?",
                buttons: ["是", "否"]
            }, function(ret, err) {
              if(ret.buttonIndex == 1){
                toast.loading({
                        title:"跳转中",
                        duration:2000
                    },function(ret){
                        setTimeout(function(){
                            toast.hide();
                        }, 3000)
                    });
                setTimeout(function () {
                  api.openWin({
                      name: 'login',
                      url: '../system/login.html',
                      allowEdit: true,
                      pageParam: {}, //页面代参数
                      rect: {
                          x: 0,
                          y: 0,
                          w: api.winWidth,
                          h: api.winHeight
                      }
                  });
                },1000)
              }
            });
            return false;
          }
          var articleID = $(e).parent().attr("articleID");
          var val = $(e).find(".like").text();
          var that = e;
            $.ajax({
              type:"post",
              data:{
                type:2,
                article:articleID
              },
              beforeSend:function (request) {
                request.setRequestHeader("token", token);
              },
              url:dns+"like/okorno",
              success:function(res){
                if(res.msg=="成功点赞"){
                  $(that).find(".zan_icon").addClass("active");
                  val++;
                  $(that).find(".like").text(val);
                  toast.custom({
                    title:"成功点赞!",
                    html:'<i class="aui-iconfont aui-icon-laud"></i>',
                    duration:1500
                  });
                }
                if(res.msg=="取消点赞"){
                  $(that).find(".zan_icon").removeClass("active");
                  val--;
                  $(that).find(".like").text(val);
                }
              }
            })
    }
    // 图片放大
    function bigPhoto(e) {
      //如果提供了事件对象，则这是一个非IE浏览器
      if (e && e.stopPropagation) {
          //因此它支持W3C的stopPropagation()方法
          e.stopPropagation();
      } else {
          //否则，我们需要使用IE的方式来取消事件冒泡
          window.event.cancelBubble = true;
      }
          var ind = $(e).index();
          var imgList = [];
          $(e).parent().find(".aui-col-xs-4").each(function () {
            imgList.push($(this).attr("imgattr"))
          })
          console.log(imgList);
          var photoBrowser = api.require('photoBrowser');
          photoBrowser.open({
              images: imgList,
              placeholderImg: 'widget://res/img/apicloud.png',
              bgColor: '#000',
              activeIndex:ind
          }, function(ret, err) {
              if (ret.eventType == 'click') {
                  photoBrowser.close()
              }
              if (ret.eventType == 'longPress') {
                var a = Math.floor(Math.random()*1000);
                var retIndex = ret.index;
                api.confirm({
                    title: "温馨提示",
                    msg: "是否保存图片?",
                    buttons: ["是", "否"]
                }, function(ret, err) {
                    if (ret.buttonIndex == 1) { //确认退出
                      api.download({
                          url: imgList[retIndex],
                          savePath: 'fs://'+a+'.jpg',
                          report: true,
                          cache: false,
                          allowResume: true
                      }, function(ret, err) {
                          if (ret.state == 1) {
                              //下载成功
                              // console.log("下载成功");
                              // 保存图片
                              api.saveMediaToAlbum({
                                path :ret.savePath
                              }, function(ret, err) {
                                  if (ret.status==true) {
                                    alert("保存成功!")
                                  } else {
                                  }
                              });
                          } else {

                          }
                      });
                    } else {
                        return;
                    }
                });
              }
               else {
                  // alert(JSON.stringify(err));
              }
          });
    }
    function getvideo(){
      // 跳转到其它页面暂停当前页面的视频
      var videoList = document.getElementsByTagName("video");
      for(var i = 0; i< videoList.length;i++){
        if(!videoList[i].paused){
          videoList[i].pause(); //暂停控制
        }
      }
    }
</script>

</html>
